<template>
	<div>
		<!-- 头部展示 -->
		<van-search placeholder="请输入搜索关键词" />
		<div class="p-[10px] header">
			<div v-if="shopAddersInfo.id">
				<div class="text-[16px] font-bold" @click="router.push(`/storeList?id=${shopAddersInfo.id}`)">
					<span>{{ shopAddersInfo?.name }}({{ shopAddersInfo?.position }}) </span>
					<van-icon name="arrow" />
				</div>
				<div class=" text-[#bcbcbc] my-[5px]">门店距您{{ shopAddersInfo?.distance }}km
				</div>
				<div>营业时间:{{ dayjs(shopAddersInfo?.busineTime?.split(",")[0]).format("HH:mm") }} - {{
					dayjs(shopAddersInfo?.busineTime?.split(",")[1]).format("HH:mm") }}</div>
			</div>
			<div v-else>
				<div class="text-[16px] font-bold" @click="router.push(`/storeList?id=${shopAddersInfo.id}`)">
					<span>请选择门店</span>
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="config bg-[#edf2fa] text-[18px]">
				<span :class="{ 'avtive': activeTab == 1 }" @click="cut(1)">自提</span>
				<span :class="{ 'avtive': activeTab == 2 }" @click="cut(2)">配送</span>
			</div>
		</div>
		<!-- 分类选择 -->
		<div class="tree_select">
			<van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items"
				@click-nav="clickNav" height="100%">
				<template #content>
					<div>
						<!-- 筛选 -->
						<div class="h-[48px] items-center flex">
							<div class="flex">
								<div class="option_item" :class="{ 'itemActive': activeItem == item.id }"
									v-for="item, index in classTypeList" :key="item.id" @click="typeChage(item.id, index)">
									{{ item.title }}
								</div>
							</div>
						</div>
						<!-- 商品列表 -->
						<div class="px-[10px]" v-if="shopList.length">
							<div class="flex justify-between items-end mb-[15px]" v-for="item in shopList" :key="item.id">
								<img class="w-[60px] h-[60px]" :src="item.banner">
								<div class="flex flex-col ml-[5px] flex-1 ">
									<div>{{ item.title }}</div>
									<div class="text-[16px] text-[#fb201c] mt-[5px] font-bold">¥ {{ item.price }}</div>
								</div>
								<van-button round type="danger" size="mini" @click="selectSize(item)">选规格</van-button>
							</div>
						</div>
						<van-empty description="没有更多数据啦~" v-else />
					</div>
				</template>
			</van-tree-select>
		</div>
		<!-- 提交订单栏 -->
		<!-- <van-submit-bar :price="totaLPrice * 100 || 0" button-text="去结算" :disabled="totaLPrice == 0" @submit="onSubmit"> -->
		<van-submit-bar :price="totaLPrice * 100 || 0" button-text="去结算" @submit="onSubmit">
			<van-badge :content="goodsNumSum">
				<van-icon name="cart" size="40" @click="cartShow = true" />
			</van-badge>
		</van-submit-bar>
		<!-- 规格弹层 -->
		<van-popup v-model:show="show" style="padding: 20px;" closeable round position="bottom">
			<div>
				<!-- 商品信息 -->
				<div class="flex items-center">
					<img class="w-[100px]" :src="formData.banner" alt="">
					<div class="ml-[15px]">
						<div class="text-[16px]">{{ formData.title }}</div>
						<div class="text-[#ff1030] text-[16px] font-bold">¥ {{ formData.price }}</div>
						<div class="text-[#bebebe]">库存：{{ formData.stock }}</div>
					</div>
				</div>
				<!-- 款式 -->
				<div class="my-[10px]">
					<div class="text-[16px] mb-[10px]">款式</div>
					<div class="flex">
						<div :class="{ 'itemActive': formData.style == index }" class="option_item" style="width: auto;"
							v-for="item, index in formData.goodsNorms" :key="item.id">{{
								item.desc }}
						</div>
					</div>
				</div>
				<!-- 数量 -->
				<div class="flex justify-between">
					<div class="tex-[16px]">数量</div>
					<div>
						<van-stepper v-model="formData.number" />
					</div>
				</div>
				<!-- btn -->
				<van-button type="danger" round class="w-[100%] mt-[10px]" @click="joinCar">确定</van-button>
			</div>
		</van-popup>
		<!-- 购物车弹层 -->
		<van-popup v-model:show="cartShow" style="padding: 20px;" round position="bottom">
			<div class="w-[100%]">
				<div class="flex justify-between w-[100%] text-[16px]">
					<div class="font-bold">已选择商品</div>
					<div class="text-[#e06c75]">
						<van-icon name="delete-o" />
						清空
					</div>
				</div>
				<!-- 商品信息 -->
				<div class="flex  items-end justify-between mt-[10px]" v-for="item in cartShopList" :key="item.id">
					<img class="w-[100px]" :src="item.banner">
					<div class="ml-[15px] flex-1">
						<div class="text-[16px]">{{ item.title }}</div>
						<div class="text-[#bebebe] my-[5px]">{{ item.goodsNorm }}</div>
						<div class="text-[#ff1030] text-[16px] font-bold">¥ {{ item.goodsPrice }}</div>
					</div>
					<van-stepper v-model="item.goodsNum" />
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { showSuccessToast } from 'vant';
import { GetShopCateList, GetCateInfo, GetInfoByCateId } from '@/api/shopCate.js'
import { useRouter } from 'vue-router'
import dayjs from "dayjs";
import { updateShopCart, QueryShopCart } from '@/api/cart'
const router = useRouter()
const activeTab = ref(1) //  取货类型
const activeId = ref(1) // 分类选择类型
const activeIndex = ref(0) // 分类选择下标
const items = ref([]) // 分类数据
const classTypeList = ref([]) // 
const activeItem = ref(16) // 选择选中的类型
const shopList = ref([])
const show = ref(false)
const cartShow = ref(false)
const formData = ref({
	number: 1,
	style: 0
})
const goodsNumSum = ref(0)
const shopAddersInfo = computed(() => JSON.parse(sessionStorage.getItem("shop-info")) || {})
const cartShopList = ref([])
const totaLPrice = ref([])
// 获取分类列表
const loadGetClassList = async () => {
	const res = await GetShopCateList()
	items.value = res.data
	if (res.data != null && res.data.length) {
		items.value = res.data.map(item => {
			return {
				text: item.title,
				id: item.id
			}
		})
		await getCateInfo(0)
		await typeChage(16)
	}
}
loadGetClassList()

// 查询分类数据
const getCateInfo = async (index) => {
	const res = await GetCateInfo({ id: items.value[index].id })
	classTypeList.value = res.data
}

// 获取商品数据
const typeChage = async (id) => {
	activeItem.value = id
	const res = await GetInfoByCateId({ cateId: id })
	shopList.value = res.data.records
}

const clickNav = async (index) => {
	await getCateInfo(index)
	if (classTypeList.value.length && classTypeList.value[0]?.id) {
		typeChage(classTypeList.value[0].id)
	}

}
// 提交订单
const onSubmit = () => {
	router.push("/orderSub")

}
// tab切换
const cut = (type) => {
	activeTab.value = type
}
// 选择规格
const selectSize = (item) => {
	formData.value = { ...formData.value, ...item }
	show.value = true
}

// 加入购物车
const joinCar = async () => {
	const data = {}
	data.goodsId = formData.value.id
	data.goodsNum = formData.value.number
	data.goodsPrice = formData.value.price
	data.goodsNorm = formData.value.goodsNorms[formData.value.style].desc
	await updateShopCart(data)
	show.value = false
	lookPayCart()
	showSuccessToast("加入购物车完成")
}

// 查询购物车
const lookPayCart = async () => {
	const res = await QueryShopCart()
	res.data.records.forEach(item => {
		goodsNumSum.value += item.goodsNum
	})
	totaLPrice.value = res.data.records.reduce((acc, cur) => {
		return acc + cur.goodsPrice * cur.goodsNum;
	}, 0);
	cartShopList.value = res.data.records
}
lookPayCart()
</script>
<style scoped lang="scss">
.header {
	border-bottom: 1px solid #c0c0c0;
	display: flex;
	justify-content: space-between;

	.config {
		height: 28px;
		border-radius: 50px;
		display: flex;
		width: 120px;

		span {
			border-radius: 15px;
			width: 60px;
			text-align: center;
		}
	}
}

.tree_select {
	height: calc(100vh - 250px) !important;
}

.avtive {
	background: red;
	color: #fff;
}

.van-submit-bar {
	bottom: 60px !important;
	box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}

.option_item {
	width: 80px;
	background: #bebebe;
	margin: 0 5px;
	text-align: center;
	height: 25px;
	border-radius: 15px;
	padding: 3px 15px;
	line-height: 18px;
	font-size: 12px;
	font-weight: bold;
}

.itemActive {
	color: #fff;
	background: red;
}

:deep(.van-overlay) {
	height: 93% !important;
}

:deep(.van-popup--bottom) {
	bottom: 63px !important;
}
</style>